<html>
	<head>
		<meta charset="utf8">
		<title>drawImg</title>
	</head>
	<body>
	<canvas id="main" width="800" height="600" ></canvas>
	<img src="img/hakurei_action.png" alt="lingmeng" style= "width:33px;height:47px">
	<script type="text/javascript">
		var canvas = document.querySelector('#main');
		var ctx = canvas.getContext('2d');



		var img = new Image();
		img.onload = function(){
			ctx.save();
			//ctx.scale(1,.5);

			ctx.shadowColor = 'rgba(0,0,0,.1)';
			ctx.shadowOffsetX = 50;
			ctx.shadowOffsetY = 50;
			ctx.shadowBlur = 10;
			//ctx.drawImage(img,0,0,510,128,0,0,510,128);
			ctx.drawImage(img,5,210,25,25,0,0,25,25);
			ctx.restore();
			ctx.fillStyle = 'rgba(1,1,0,0.5)';
			ctx.beginPath();
			ctx.arc(40, 40, 10, 0, Math.PI * 2, true);
			ctx.fill();
		};
		//img.src = 'img/main_title.png';
		img.src = 'img/barrage.png';

		/*var context;
		var width, height;
		var i;
		var flymsg;
		var interval = null;
		function draw(id, message) {
			var canvas = document.getElementById(id);
			if (canvas == null) return false;
			context = canvas.getContext('2d');
			width = canvas.width;
			height = canvas.height;
			i = 0;
			flymsg = message;
			interval = setInterval(translate, 1000/30);
		}

		function translate() {
			context.clearRect(0, 0, width, height);
			context.textBaseline = 'top';
			context.fillStyle = '#000';
			context.font = 'bold 24px sans-serif';
			context.strokeText(flymsg, i, 0);
			context.fillStyle = '#fff';
			context.fillText(flymsg, i, 0)
			i = i + 1;
			console.log(i);
			if(i>800){
				clearInterval(interval);
			}
		}
		//draw('main','hello');
	*/


		/*debugger;
		function a(arg) {
			console.log(arg);
			debugger;
			console.log('as' + arg);
		//	return 0;
		}(1);
		//a(1);
		*/
	</script>
	</body>
</html>
